<template>
    <div>
        <el-form-item label="图片：">
            <input v-model="tempValue.imageSrc" />
        </el-form-item>
        <el-form-item label="注:此图片比例为2:1否则失真">
        </el-form-item>
        <el-button type="primary" @click="changeImgs">选择图片</el-button>
        <change-image ref="changeimg" imgnum="1" albumType="pic_root" @returnPicture="getPicture"></change-image>
    </div>
</template>
<script>
    import {mapState, mapGetters} from 'vuex';
    import changeImage from '../../components/changeImage';

    export default {
        name: "qkImageAttr",
        props: {
            prop: {
                type: Object,
                default() {
                    return {
                        imageSrc: "http://seopic.699pic.com/photo/50051/4111.jpg_wh1200.jpg"
                    }
                }
            }
        },
        components: {
	        changeImage
        },
        data() {
            return {
                tempValue: {}
            }
        },
      methods:{
	      changeImgs(){
	      	this.$refs.changeimg.open();
          },
	      getPicture(e){
	      	this.tempValue.imageSrc = e
          }
      },
        mounted() {
            this.tempValue = this.prop;
        },
        watch: {
            tempValue(e) {
                this.$store.commit("updateActiveElementProp",e);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .arrt-eidt-wrapper{
        display: flex;
    .arrt-eidt-l{
        width: 108px;
    }
    .arrt-eidt-r{
        flex: 1;
    }
    }
</style>


